<template>
  <el-dialog v-model="isShow" title="表单校验错误" @closed="onClosed" append-to-body
             :close-on-click-modal="true"
             :close-on-press-escape="true"
             :show-close="true">
    <div v-for="error in errors">
      <el-button type="danger" :icon="CircleCloseFilled" text @click="jumpError(error)">
        {{ error.message }}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import _ from "lodash";
import {CircleCloseFilled} from '@element-plus/icons-vue'

export default {
  components: {CircleCloseFilled},
  props: [
    'scope',
    '_insId',
    'validRetList'
  ],

  data() {
    const errors = []
    _.forEach(this.validRetList, validRet => {
      _.forOwn(validRet, (value, key) => {
        if (_.isArray(value)) {
          _.forEach(value, e => {
            errors.push(e)
          })
        } else {
          errors.push(value)
        }
      })
    })

    return {
      CircleCloseFilled,
      isShow: false,
      errors: errors,
    }
  },

  mounted() {
    this.isShow = true
  },

  methods: {
    jumpError(error) {
      this.isShow = false
      this.$nextTick(() => {
        this.$props.scope.scrollToField(error.field)
      })
    },
    onClosed() {
      system.removeCmp(this)
    },
  }
}
</script>